<template>
  <div>
    <n-grid :x-gap="15" cols="24 300:1 600:24">
      <n-grid-item span="6">
        <n-card :bordered="false" class="proCard" size="small">
          <n-thing
            v-for="item in typeTabList"
            :key="item.key"
            :class="{ 'thing-cell-on': type === item.key }"
            class="thing-cell"
            @click="switchType(item)"
          >
            <template #header>{{ item.name }}</template>
            <template #description>{{ item.desc }}</template>
          </n-thing>
        </n-card>
      </n-grid-item>
      <n-grid-item span="18">
        <n-card :bordered="false" :content-style="{
                    padding: '0 20px 20px',
                  }" :header-style="{
                    padding: '20px',
                  }" class="proCard" size="small">
          <template #header>
            <text style="font-weight: 500;font-size: 18px;color: #3D3D3D;line-height: 25px;">{{
                typeTitle
              }}
            </text>
          </template>
          <appSetting v-if="type === 1"/>
          <!--          <operateSetting v-if="type === 2" />-->
          <wxShareSetting v-if="type === 2"/>
          <appConfig v-if="type === 3"/>
          <paymodeConfig v-if="type === 4"/>
          <pmsPrice v-if="type === 5"/>
        </n-card>
      </n-grid-item>
    </n-grid>
  </div>
</template>
<script lang="ts">
import {defineAsyncComponent, defineComponent, reactive, toRefs} from 'vue';

/** 异步加载的组件，用到的时候再加载组件 */
const appSetting = defineAsyncComponent(() => {
    return import('./appSetting.vue');
  }),
  operateSetting = defineAsyncComponent(() => {
    return import('./operateSetting.vue');
  }),
  wxShareSetting = defineAsyncComponent(() => {
    return import('./wxShareSetting.vue');
  }),
  appConfig = defineAsyncComponent(() => {
    return import('./appConfig.vue');
  }),
  paymodeConfig = defineAsyncComponent(() => {
    return import('./paySetting.vue');
  }),
  pmsPrice = defineAsyncComponent(() => {
    return import('./pmsPrice.vue');
  });
const typeTabList = [
  {
    name: '基本设置',
    desc: 'app常规配置',
    key: 1,
  },
  {
    name: '微信分享配置',
    desc: '微信分享相关配置',
    key: 2,
  },
  /* {
     name: 'APP配置',
     desc: 'app配置',
     key: 3,
   },*/
  {
    name: '支付方式',
    desc: '允许使用的支付方式',
    key: 4,
  },
  {
    name: '民宿价格配置',
    desc: '配置民宿整体溢价',
    key: 5,
  },
];
export default defineComponent({
  components: {
    appSetting,
    // appVersion,
    operateSetting,
    wxShareSetting,
    appConfig,
    paymodeConfig,
    pmsPrice
  },
  setup() {
    const state = reactive({
      type: 1,
      typeTitle: '基本设置',
    });

    function switchType(e) {
      state.type = e.key;
      state.typeTitle = e.name;
    }

    return {
      ...toRefs(state),
      switchType,
      typeTabList,
    };
  },
});
</script>
<style lang="less" scoped>
.thing-cell {
  margin: 0 -16px 10px;
  padding: 5px 16px;

  &:hover {
    background: #f3f3f3;
    cursor: pointer;
  }
}

.thing-cell-on {
  background: #f0faff;
  color: #2d8cf0;

  ::v-deep(.n-thing-main .n-thing-header .n-thing-header__title) {
    color: #2d8cf0;
  }

  &:hover {
    background: #f0faff;
  }
}
</style>
